<template>
    <div class="col-lg-12" style="display: none;" :id="randomId">
        <div class="ibox float-e-margins">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="keyword">关键字</label>
                        <input type="text" id="keyword" name="keyword" v-model="searchParams.keyword" value="" placeholder="请输入搜索关键字"
                               class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">素材分类</label>
                        <treeselect v-model="searchParams.catId" :options="cat_list" :normalizer="catNormalizer" placeholder="选择素材分类..." />
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label">&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" id="btn-search"
                                    v-on:click="query"><i
                                    class="fa fa-search"></i>
                                搜索
                            </button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-info" type="button"
                                    v-on:click="choiceOk"><i
                                    class="fa fa-check-square-o"></i>
                                确认选择
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox-content m-b-sm material-box">
                <div class="row grid" v-masonry transition-duration="0.3s" item-selector=".grid-item">
                    <div class="col-md-4 grid-item" v-for="(item, index) in material_list" v-masonry-tile v-bind:class="[item.material_id == materialCurData.material_id ? 'choice' : '']" v-on:click="choice(index)">
                        <material-preview v-bind:material-data="item"></material-preview>
                    </div>
                </div>
                <div class="row text-center">
                    <pagination :pagination="pagination" :callback="query"
                                :options="paginationOptions"></pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //参考网址：http://www.webfront-js.com/articaldetail/153.html
    //参考网址：https://blog.csdn.net/qq_33599109/article/details/79883766
    import MaterialPreview from './MaterialPreview';
    //分页
    import pagination from 'vue-bootstrap-pagination'
    //瀑布流
    import {VueMasonryPlugin} from 'vue-masonry';

    Vue.use(VueMasonryPlugin)
    //树形select选择框
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        name: "MaterialSelecter",
        data() {
            return {
                randomId: 'materialBox_' + (Math.random() * 100000000000000000),
                material_list: [],
                materialCurData(){
                    if (this.defaultMaterialData){
                        return this.defaultMaterialData;
                    } else{
                        return {};
                    }
                },
                searchParams:{//搜索参数
                    keyword:'',
                    catId:null,
                },
                cat_list: [],//分类选择项列表
                catNormalizer(node){
                    return {
                        id:node.cat_id,
                        label:node.name,
                        children: node.children,
                    }
                },
                isShow: false,//是否显示
                layerBox: null,
                pagination: {
                    total: 0,
                    per_page: 15,    // required
                    current_page: 1, // required
                    last_page: 0,    // required
                    from: 1,
                    to: 12
                },
                paginationOptions: {
                    offset: 4,
                    previousText: '上一页',
                    nextText: '下一页',
                    alwaysShowPrevNext: true,
                }
            };
        },
        watch: {
            isShow: function (val) {
                if (val) {
                    this.showBox()
                }
            }
        },
        created: function () {
            setTimeout(() => {
                this.query();
            }, 1000);
        },
        props: {
            type: {//素材类别
                type: String,
                default: 'image',
            },
            defaultMaterialData:{
                type : Object,
                default :  function (){
                    return {};
                },
            },
        },
        methods: {
            queryUrl: function () {
                if (this.type == 'image') {//图片获取
                    return '/Admin/WxMaterialImage/getChoice';
                } else if (this.type == 'voice') {//语音获取
                    return '/Admin/WxMaterialVoice/getChoice';
                } else if (this.type == 'video') {//视频获取
                    return '/Admin/WxMaterialVideo/getChoice';
                } else {//默认图文地址
                    return '/Admin/WxMaterialNews/getChoice';
                }
            },
            query: function () {
                let queryData = _.merge(this.searchParams, {
                    page: this.pagination.current_page,
                    pageSize: this.pagination.per_page,
                });
                utils.ajaxGet(this.queryUrl(), queryData,
                    (response, params) => {
                        //素材列表
                        this.material_list = response.data.data;
                        //分类列表
                        this.cat_list = response.data.catList;
                        //分页配置
                        this.pagination.total = response.data.total;
                        this.pagination.current_page = response.data.current_page;
                        this.pagination.last_page = response.data.last_page;
                        //瀑布流重新渲染
                        this.$nextTick(function(){
                            this.$redrawVueMasonry();
                        })
                    }
                );
            },
            showBox: function () {
                this.layerBox = layer.open({
                    type: 1,
                    title: '选择素材',
                    shadeClose: true,
                    anim: 2,
                    skin: 'layui-layer-molv', //加上边框
                    area: ['800px', '600px'], //宽高
                    content: $('#' + this.randomId),
                    //resize: false,
                    end: (index) => {
                        this.isShow = false;
                    }
                });
                this.query();
            },
            choice(index) {//选择
                if (this.materialCurData.material_id == this.material_list[index].material_id){
                    this.materialCurData = {};
                } else{
                    if (this.material_list[index]){
                        this.materialCurData = this.material_list[index];
                    }
                }
            },
            choiceOk:function() {//选中确定
                if (!this.materialCurData.media_id) {
                    alert('请选择素材');
                    return false;
                }
                this.$emit('choice-ok', this.materialCurData);    // 发送一个danger事件作为回调函数
                layer.close(this.layerBox);
            },
        },
        components: {pagination, MaterialPreview, Treeselect}
    }
</script>

<style scoped>
    .grid-item { width: 32%; margin-bottom: 20px;cursor: pointer;}
    .ibox{margin-bottom: 0px;}
</style>